<template>
  <div id="export">
    <span class="text">输出格式:</span>
    <br />
    <el-radio label="1" v-model="format.radio" border @change="change_format"
      >文本文档(.txt)</el-radio
    >
    <br />
    <el-radio label="2" v-model="format.radio" border @change="change_format"
      >逗号分割符文件(.csv)</el-radio
    >
    <br />
    <span class="text">保存位置:</span>
    <br />
    <input type="text" id="input" v-model="format.url" readonly />
    <button id="btn" @click="btn">更改目录</button>
  </div>
</template>

<script>
const ipcRenderer = require("electron").ipcRenderer;
export default {
  data() {
    return {
      format: {
        radio: "1",
        url: "D:\\",
      },
    };
  },
  mounted() {
    let path = window.localStorage.getItem("output_path");
    let ratio = window.localStorage.getItem("output_format");

    if (path) {
      this.format.url = path;
    } else {
      window.localStorage.setItem("output_path", this.format.url);
    }

    if (ratio) {
      this.format.radio = ratio;
    } else {
      window.localStorage.setItem("output_format", this.format.radio);
    }
  },
  methods: {
    btn() {
      const dirPath = ipcRenderer.sendSync("createDirSelectDialog");
      if (dirPath !== "null") {
        this.format.url = dirPath;
        window.localStorage.setItem("output_path", this.format.url);
      }
    },

    change_format() {
      window.localStorage.setItem("output_format", this.format.radio);
    },
  },
};
</script>
<style lang="scss" scoped>
#export {
  padding-top: 20px;
  .text {
    color: #7e7e7e;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    margin-left: 120px;
  }
  #input {
    background-color: #2b2b2b;
    outline-style: none;
    border: 1px solid #9c1a1a;
    height: 24px;
    width: 240px;
    margin-left: 180px;
    color: #7e7e7e;
  }
  #btn {
    background-color: #2b2b2b;
    border: 1px solid #9c1a1a;
    outline-style: none;
    height: 26px;
    width: 80px;
    color: #7e7e7e;
    margin-left: 10px;
    cursor: pointer;
  }
  #btn:hover {
    background-color: #9c1a1a;
  }
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #9c1a1a;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #9c1a1a;
  background: #9c1a1a;
}

/deep/ .el-radio.is-bordered {
  border: 1px solid #9c1a1a;
}

/deep/ .el-radio__inner:hover {
  border-color: #9c1a1a;
}

/deep/ .el-radio__inner {
  border: 1px solid #7e7e7e;
  background-color: #bacac6;
}

/deep/ .el-radio.is-bordered {
  border: 1px solid #9c1a1a;
  margin-top: 5px;
  margin-left: 180px;
  width: 175px;
}
</style>
